<script setup>
import {ref,onMounted} from "vue";
import {getDishes} from "@/apis/dishApi.js";
import {useRouter} from "vue-router";
const route=useRouter()
const dishList =ref([])
const getDishList =async () => {
  const  res=await getDishes(18)
  console.log(res.data.data)
  dishList.value=res.data.data
}
onMounted(() => {
  getDishList();
})
</script>

<template>
  <div>
    <ul>
      <li v-for="dish in dishList" :key="dish.id">
        <div class="item">
          <div>
            <img  :src="dish.image" alt="">
          </div>
          <div>
            <p/><span>{{dish.name}}</span>
            <p/><span>{{dish.description}}</span>
            <p/><span>&yen;{{dish.price}}</span>
          </div>
          <div>
           <el-input type="number"/>
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>

<style scoped>
ul{
  list-style-type: none;
  li{
    .item{
      display: flex;
      padding: 5px;

      img{
        width:5rem;
        height:5rem;
      }
    }
    .item:hover{
      background-color: #27ba9b;
    }

  }
}
</style>